//hook文件的命名规则  usexxx.ts    起的文件名'xxx'一定要有含义
import {ref,onMounted,onUnmounted} from 'vue'
export default function getMousePosition() {
    const x = ref(0)
    const y = ref(0)

    //创建getPostion函数--事件回调函数
    function getPostion(e: MouseEvent) {
        console.log(e)//事件对象
        console.log(e.pageX)//获取鼠标当前位置 水平 坐标
        console.log(e.pageY)//获取鼠标当前位置 垂直 坐标
        //将获取到的坐标 赋值给 x,y
        x.value = e.pageX;
        y.value = e.pageY;
    }
    //点击页面获取 x y 的值
    //浏览器界面的document.document上面绑定事件， document是DOM元素
    //什么时候能操作dom元素，在组合api onMounted 当中
    onMounted(() => {
        //在这里给document 添加点击事件，获取坐标
        document.addEventListener('click', getPostion)
    })
    //离开取消事件  将取消事件放到onUnmounted
    onUnmounted(() => {
        //离开页面时取消事件 getPostion
        document.removeEventListener('click', getPostion)
    })

    //返回 x y ，因为 该函数模块的作用就是获取 x，y坐标
    return {
        x,y
    }
}